<template>
	<div id="pickupGoods">
		<h1 class="demo-form-inline" style="inline-heigth: 100px; text-align: center; margin: auto;">已提货订单</h1>
		
		<!-- 表格 -->
				<el-table :data="pickupGoods" style="width: 100%">
				<el-table-column prop="id" label="订单ID" width="180">
				</el-table-column>
				<el-table-column prop="createTime" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="orderId" label="订单编号">
				</el-table-column>
				<el-table-column prop="totalAmount" label="订单总金额">
				</el-table-column>
				<el-table-column prop="orderStatus" label="订单状态">
				</el-table-column>
				<el-table-column prop="conveyTag" label="配送标志">
				  <template slot-scope="scope">
					<span v-if="scope.row.conveyTag=='P001-2'">已提货</span>
				  </template>
				</el-table-column>
				<el-table-column prop="paymentMethod" label="支付方式">
			  <template slot-scope="scope">
				<span v-if="scope.row.paymentMethod=='P002-1'">余额支付</span>
				<span v-if="scope.row.paymentMethod=='P002-2'">微信支付</span>
				<span v-if="scope.row.paymentMethod=='P003'">现金支付</span>
			  </template>
				</el-table-column>
				<el-table-column prop="payStatus" label="支付状态">
			  <template slot-scope="scope">
				<span v-if="scope.row.payStatus=='K002-1'">等待支付</span>
				<span v-if="scope.row.payStatus=='K002-2'">支付失败</span>
				<span v-if="scope.row.payStatus=='K002-3'">支付成功</span>
			  </template>
				</el-table-column>
				  <!--操作列-->
				  <el-table-column label="操作">
					  <template slot-scope="scope">
						<el-button size="small"
						round 
						type="primary"
						@click="viewdetails(scope.$index,scope.row)">查看详情</el-button>
					  </template>
					</el-table-column>
				 </el-table>
				
				<!---分页组件-->
					 <el-pagination  style="inline-heigth: 100px; text-align: center; margin: auto;"
					 @size-change="handleSizeChange"
						  @current-change="handleCurrentChange"
						  :current-page="pageNo"
						  :page-sizes="pageSizeList"
						  :page-size="pageSize"
						  layout="total, sizes, prev, pager, next, jumper"
						  :total="total">
					 </el-pagination>
					 
					 <!-- 添加对话框 -->
					
					   <el-dialog title="查看详情订单" :visible.sync="makeFormVisible" >
					   	<el-table :data="pickupOne" style="width: 100%">
					   	<el-table-column prop="productName" label="商品名称">
					   	</el-table-column>
					   	<el-table-column prop="amount" label="数量">
					   	</el-table-column>
					   	<el-table-column prop="price" label="单价">
					   	</el-table-column>
					   	<el-table-column prop="subtotal" label="小计">
					   </el-table-column>
					   </el-table>
					       </el-dialog>
					 
					 </div>
					
		</template>
<script>
		export default {
		      data() {
		        return {
					pickupGoods: [],
					pickupOne:[],
					//当前页号
					pageNo: 1,
					//当前页大小
					pageSize: 2,
					//总记录数
					total: 0,
					//页大小列表
					pageSizeList: [2, 5, 10, 20],
					//添加对话框的显示
					makeFormVisible: false,
					}
				},
				created() {
					// this.handleSizeChange(),
					// this.handleCurrentChange(),
					this.pickup()
				},
		         methods:{
					 // 页大小改变
					   handleSizeChange(val) {
					 	  this.pageSize = val
					 	  this.pickup()
						  
					   },
					   
					 //页号改变
					 handleCurrentChange(val) {
					 	this.pageNo = val
					 	// 重新查询
					 	this.pickup()
					 },
					 
					 //分页查询已提货订单表
					 async pickup() { 
					 	// 用es6的解构函数
             let cid=	sessionStorage.getItem("token")
					 	const {data: res} = await this.$http.post
					 	(`/buy/order/pickupcx/${this.pageSize}/${this.pageNo}/${cid}`)
					 	this.pickupGoods = res.list
					 	this.total = res.total
					 },
					 
					//点击查看详情
					async viewdetails(index,row) {
						// 用es6的解构函数
					//显示对话框
					this.makeFormVisible = true
					const {data: res} = await this.$http.post(`/buy/orderDetails/orderdetaid/${row.id}`)
					    this.pickupOne=res 
					},
					
					
				 }
		        }
		      
		    
			
		</script>
		
<style>
</style>